<template>
	<view class="logindiv">
	 <view class="topimg" >
	 	<h1><img src="http://img-test.gz-yami.com/mini/logo.jpg" alt="" class='loginimg'></h1>
	 	<p>mall4j</p>
	 </view>
	<view class="user">
		<text class="username">用户名</text>
		<input type="text" @change="username" placeholder="请输入用户名">
	</view>
	<view class="user">
		<text>密码</text>
		<input type="text" @change="password" placeholder="请输入密码">
	</view>
	<view class="btnclass">
		<button class="reg" @click="reg">注册</button>
		<button class="back" @click="backhome">回到首页</button>
	</view>
	<view class="login">
		<p @click='gologin'>已有账号？去登录&gt;</p>
	</view>
	</view>
</template>

<script>
	var crypto = require("../../utils/crypto.js");
	export default {
		data(){
			return {
				userName: "",
				passWord: ''
			}
		},
		methods:{
				username(e) {
					console.log(e.target.value, '+++++++++++++++');
					this.userName = e.target.value
				},
				password(e) {
					this.passWord = e.target.value
				},
			backhome(){
				uni.navigateTo({
					url:'/pages/home/home'
				})
			},
			gologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
		   reg(){
			   console.log(this.userName,this.passWord);
			  uni.request({
			      url: 'http://111.67.198.176:8112/user/register', 
			  	method:'POST',
			      data: {
			          userName:this.userName,
			  		passWord:crypto.encrypt(this.passWord) 
			      },			
			      header:[{
			          'custom-header': 'hello' //自定义请求头信息
			      }] ,
			      success: (res) => {	
			  		if(res.statusCode===200){
						uni.showToast({
							icon: 'none',
							title: '注册成功，去登录',
						});
					
						return
					}else{
						uni.showToast({
							icon: 'none',
							title: '账号已存在',
						});
					}
			          
			      }
			  }); 
		   }
		},
		mounted(){
			
		}
	}
</script>

<style scoped>
	.logindiv{
		width: 100%;
		height: 100%;
	}
	.loginimg{
		width: 64px;
		height: 64px;
	
	}	
	.topimg{
		text-align: center;
		margin-top: 50px;
		font-size: 12px;
	}
    .user{
		display: flex;
		width: 90%;
		background-color: #f8f8f8;
		margin-left: 5%;
		height: 30px;
		margin-top: 10px;
		line-height: 30px;
		font-size: 12px;
	}
	.user input{
			margin-top: 5px;
			margin-left: 10px;
		}
		.btnclass{
		margin-top: 30px;
		}
	.reg{
		width: 288px;
		height: 29px;
		background-color: #0AB903;
		margin-bottom: 10px;
		font-size: 12px;
		color: #fff;
	}
	.back{
		width: 288px;
		height: 29px;
		background-color:#EEEEEE ;
		font-size: 12px;
	}
	.login p{
		font-size: 12px;
		color: #00AAFF;
		margin-left: 5%;
		margin-top: 10px;
	}
</style>